<template>
  <div>
    <!-- 注册模态框 -->
    <el-dialog :visible.sync="dialogShow" width="300px" clearable>
      <h3>注册</h3>
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item prop="userName">
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
            v-model="ruleForm.userName"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-view"
            v-model="ruleForm.password"
            type="password"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="againPassword">
          <el-input
            placeholder="请再次输入密码"
            prefix-icon="el-icon-view"
            v-model="ruleForm.againPassword"
            type="password"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 100%" @click="enrolment"
          >注册</el-button
        >
      </span>
    </el-dialog>

    <!--  登录模态框 -->
    <el-dialog :visible.sync="loginShow" width="300px" clearable>
      <h3>登录</h3>
      <el-form :model="loginForm" :rules="rules">
        <el-form-item prop="userName">
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
            v-model="loginForm.userName"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-view"
            v-model="loginForm.password"
            type="password"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="width: 100%"
          @click="doLogin(loginForm)"
          >登录</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import enrolment from "../API/enrolment";
export default {
  name: "Dialog",
  data() {
    return {
      dialogShow: false,
      loginShow: false,
      //注册
      ruleForm: {
        userName: "",
        password: "",
        againPassword: "",
      },
      //登录
      loginForm: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        againPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //显示注册模态框
    showDialog() {
      this.dialogShow = true;
    },
    //显示登录模态框
    loginDialog() {
      this.loginShow = true;
    },
    //点击注册传递参数调用接口
    async enrolment() {
      // console.log('注册')
      const { data: res } = await enrolment.getEnrolment({
        userName: this.ruleForm.userName,
        password: this.ruleForm.password,
      });
      /*  if (res.code !== 001) {
        // msg
        this.$message.error(res.msg);
      }  */
      this.ruleForm = {};
      this.dialogShow = false;

      /*  console.log(res); */
    },
    async doLogin(loginForm) {
      console.log(this.loginForm);
      const { data: res } = await enrolment.getUser({
        userName: this.loginForm.userName,
        password: this.loginForm.password,
      });
      this.$store.commit("user", {
        userName: res.user.userName,
        id: res.user.user_id,
      });
      console.log(res);

      this.loginShow = false;
      this.$notify({
        title: "成功",
        message: "登陆成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.el-dialog {
  margin: 0 auto;

  .el-input {
    margin-top: 20px;
  }
  h3 {
    font-size: 20px;
    text-align: center;
    font-weight: 400;
  }
}
</style>